import {
  Button,
  Cascader,
  Checkbox,
  DatePicker,
  TimePicker,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  Slider,
  Upload,
} from 'antd';
import { FormInstance, FormProps, Rule } from 'antd/lib/form';
import { InputProps } from 'antd/lib/input';
import React from 'react';
import UploadImg from '../upload';
import { PlusOutlined } from '@ant-design/icons';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import moment from 'moment';
interface IFieldName {
  value: string;
  label: string;
  children?: string;
}

export interface IForm {
  key?: string;
  label?: string | React.ReactElement;
  type?: string;
  placeholder?: string;
  data?: {
    list: any[];
    fieldNames?: IFieldName;
    extra?: { min: string; max: string };
  };
  initValue?: string;
  meta?: {
    buttonStyle?: 'solid' | 'outline';
    optionType?: 'button' | 'default';
  };
  rules?: Rule[] | undefined;
  col?: number;
  arrFormItem?: Array<IForm>;
  width?: number;
  disabled?: boolean;
  [x: string]: any;
}

interface IStringFnc {
  [p: string]: (props: IForm, form: FormInstance<any>) => JSX.Element;
}

export enum IFormTypeEnum {
  Input = 'SinoInput',
  Select = 'SinoSelect',
  RadioGroup = 'SinoRadioGroup',
  Switch = 'SinoSwitch',
  DatePicker = 'SinoDatePicker',
  InputNumber = 'SinoInputNumber',
  Cascader = 'SinoCascader',
  Checkbox = 'SinoCheckbox',
  RangePicker = 'SinoRangePicker',
  Upload = 'SinoUpload',
  TextArea = 'SinoTextArea',
  BraftEditor = 'SinoBraftEditor',
  TimePicker = 'SinoTimePicker',
  DatePickerTime = 'SinoDatePickerTime',
  Slider = 'SinoSlider',
}

const SinoSlider = (props: IForm) => {
  return <Slider min={1} max={100} />;
};

const SinoInput = (props: IForm) => {
  return (
    <Input
      placeholder={props.placeholder || `请输入${props.label || ''}`}
      style={{ width: props.width }}
    />
  );
};

const SinoInputNumber = (props: IForm) => {
  return (
    <InputNumber
      type="number"
      min={props.min}
      placeholder={`请输入${props.label || ''}`}
      style={{ width: props.width || 200 }}
    />
  );
};

const SinoSelect = (props: IForm) => {
  return (
    <Select
      placeholder={`请选择${props.label || ''}`}
      allowClear
      showSearch
      optionFilterProp="label"
      style={{ width: props.width }}
    >
      {props.data?.list?.map((row, index) => {
        return (
          <Select.Option value={row.value} key={index} label={row.label}>
            {row.label}{' '}
            {props.data?.extra &&
              `(${row[props.data.extra.min]}/${row[props.data.extra.max]})`}
          </Select.Option>
        );
      })}
    </Select>
  );
};

const SinoRadioGroup = (props: IForm) => {
  return (
    <Radio.Group
      options={props.data?.list}
      buttonStyle={props.meta?.buttonStyle}
      optionType={props.meta?.optionType}
      style={{ width: props.width }}
    />
  );
};

const SinoSwitch = (props: IForm) => {
  return <Switch style={{ width: props.width }} />;
};

const SinoCheckbox = (props: IForm) => {
  return (
    <Checkbox.Group options={props.data?.list} disabled={props.disabled} />
  );
};

const SinoDatePicker = (props: IForm, form: FormInstance<any>) => {
  return (
    <DatePicker
      format="YYYY-MM-DD"
      disabledDate={(current) => current > moment().day(moment().day())}
      onSelect={(e) => {
        console.log();
      }}
      onChange={(dates, dateString) => {
        // form.setFieldsValue({ [props.key]: dateString });
        console.log(dateString, 'dateString[[====');
        // return props.onChange(dateString);
      }}
      style={{ width: props.width }}
    />
  );
};

const SinoDatePickerTime = (props: IForm, form: FormInstance<any>) => {
  return (
    <DatePicker
      showTime
      style={{ width: props.width }}
      placeholder={`请选择${props.label || ''}`}
    />
  );
};

const SinoRangePicker = () => {
  return (
    <DatePicker.RangePicker
      disabledDate={(current) => current > moment().day(moment().day())}
    />
  );
};

const SinoTimePicker = () => {
  return <TimePicker />;
};

const SinoCascader = (props: IForm) => {
  return (
    <Cascader
      fieldNames={props.data?.fieldNames}
      options={props.data?.list}
      placeholder="Please select"
      style={{ width: props.width }}
    />
  );
};
const SinoBraftEditor = (props: IForm) => {
  return <BraftEditor style={{ border: '1px solid #d9d9d9' }} />;
};

const SinoUpload = (props: IForm) => {
  return (
    <Upload name="logo" action="/upload.do" listType="picture-card">
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>点击上传</div>
      </div>
    </Upload>
  );
};
export const SinoTextArea = (props: IForm) => {
  return (
    <Input.TextArea
      placeholder={`请输入${props.label || ''}`}
      style={{ width: props.width }}
      autoSize={{ minRows: 3, maxRows: 5 }}
    />
  );
};

const stretegy: IStringFnc = {
  SinoInput,
  SinoSelect,
  SinoRadioGroup,
  SinoCheckbox,
  SinoSwitch,
  SinoDatePicker,
  SinoInputNumber,
  SinoCascader,
  SinoRangePicker,
  SinoUpload,
  SinoTextArea,
  SinoBraftEditor,
  SinoTimePicker,
  SinoDatePickerTime,
  SinoSlider,
};

export const SinoFormItem = (props: IForm, form: FormInstance<any>) => {
  console.log('======', props);

  let list = [];
  // 将后端数据传的key 跟name 统一转换成value和name
  if (props.data?.list && props.data?.fieldNames) {
    list = changeKey(
      props.data.list,
      props.data.fieldNames.value,
      props.data?.fieldNames.label,
    );
    props.data.list = list;
  }
  if (props.type === 'SinoDatePicker') {
    console.log('props.data.list======', stretegy[props.type]);
  }

  return props.type && stretegy[props.type](props, form);
};

export function changeKey<T>(arr: T[], value: string, label: string) {
  const result = arr.map((item) => {
    return {
      ...item,
      value: item[value as keyof typeof item],
      label: item[label as keyof typeof item],
    };
  });
  return result;
}
